<template>
  <n-config-provider
    :theme="theme"
    :theme-overrides="themeOverrides"
  >
    <n-layout position="absolute">
      <n-layout-header
        style="height: 64px;"
        bordered
      >
        <PageHeader @on-change-theme="onChangeTheme" />
      </n-layout-header>
      <n-layout-content
        position="absolute"
        style="top: 64px"
        :native-scrollbar="false"
      >
        <n-loading-bar-provider>
          <n-message-provider>
            <n-notification-provider>
              <page-content class="page-content" />
            </n-notification-provider>
          </n-message-provider>
        </n-loading-bar-provider>
        <n-back-top :right="100" />
        <n-popover trigger="hover">
          <template #trigger>
            <n-button
              class="custom-wrapper"
              type="primary"
              circle
            >
              <template #icon>
                <n-icon size="18">
                  <LogoWechat />
                </n-icon>
              </template>
            </n-button>
          </template>
          <div class="custom-weixin">
            <img :src="Author" />
          </div>
        </n-popover>
      </n-layout-content>
    </n-layout>
  </n-config-provider>
</template>

<script lang="ts">
import { defineComponent, provide } from "@vue/runtime-core";
import {
  NLoadingBarProvider,
  NConfigProvider,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NBackTop,
  darkTheme,
  useLoadingBar,
  NButton,
  NIcon,
  NPopover,
} from "naive-ui";
import { ref } from "vue";
import PageHeader from "./components/PageHeader.vue";
import PageContent from "./components/PageContent.vue";
import { LogoWechat } from "@vicons/ionicons5";
import Author from "./assets/author.png";
export default defineComponent({
  components: {
    NLoadingBarProvider,
    NConfigProvider,
    PageHeader,
    NBackTop,
    NLayout,
    NLayoutHeader,
    NLayoutContent,
    NPopover,
    PageContent,
    NButton,
    NIcon,
    LogoWechat,
  },
  setup() {
    const theme = ref();
    const customTheme = {
      common: {
        primaryColor: "#d97d13",
        bodyColor: "#ffffff",
        primaryColorHover: "#d97d13",
        contentColor: "#f00",
      },
    };
    const contentBg = ref("#f5f5f5");
    const themeOverrides = ref();
    function onChangeTheme(val: boolean) {
      theme.value = val ? darkTheme : undefined;
      themeOverrides.value = val ? undefined : customTheme;
      contentBg.value = val ? "#333333" : "#f5f5f5";
    }
    provide("state", {
      price: "￥599",
    });
    return {
      theme,
      themeOverrides,
      onChangeTheme,
      Author,
      contentBg,
    };
  },
});
</script>
<style scoped>
.page-content {
  --content-bg-color: v-bind(contentBg);
}
.custom-wrapper {
  position: fixed;
  right: 100px;
  bottom: 120px;
  z-index: 999;
  width: 44px;
  height: 44px;
  box-shadow: 2px 2px 10px #e7dcdc;
}
.custom-weixin img {
  width: 150px;
}
</style>
